<template>
	<view class="wrap">
		<view class="top"></view>
		<view class="content">
			<view class="title">欢迎登录xxx平台</view>
			<u-form :model="form" ref="uForm">
				<u-form-item left-icon="phone" :left-icon-style="leftIcon" prop="phone"><u-input type="number" v-model="form.phone" placeholder="请输入手机号" /></u-form-item>
				<u-form-item left-icon="lock" :left-icon-style="leftIcon" prop="code">
					<u-input type="number" v-model="form.code" placeholder="请输入验证码" />
					<u-button slot="right" type="primary" size="mini" @click="getCodes" :disabled="isSendCode">{{isSendCode?seconds+"秒后重新获取":"获取验证码"}}</u-button>
				</u-form-item>
			</u-form>

			<button @tap="submit" class="getCaptcha">登录</button>
			<view class="alternative">
				<view class="password">密码登录</view>
				<view class="issue">遇到问题</view>
			</view>
		</view>
		<view class="buttom">
			<u-divider margin-top="20">其他登录方式</u-divider>
			<view class="loginType">
				<view class="wechat item">
					<view class="icon"><u-icon size="70" name="weixin-fill" color="rgb(83,194,64)"></u-icon></view>
					微信登录
				</view>
			</view>
			<view class="hint">
				登录代表同意
				<text class="link">xxx用户协议、隐私政策，</text>
				并授权使用您的xxx账号信息（如昵称、头像、收获地址）以便您统一管理
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				phone:'',
				code:''
			},
			seconds:60,
			isSendCode:false,
			timmer:null,
			leftIcon: { color: 'gray !important', fontSize: '32rpx' },
			rules: {
				phone: [
					{
						required: true,
						message: '请输入电话号码',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}
				],
				code: [
					{
						required: true,
						message: '请输入验证码',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}
				]
			}
		};
	},
	methods: {
		getCodes(){
			this.isSendCode = true
			const self = this
			this.timmer = setInterval(()=>{
				self.seconds--;
				if(self.seconds==0){
					clearInterval(self.timmer)
					self.isSendCode = false
				}
			},1000)
		},
		submit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					this.$store.dispatch('add_user',this.form).then(v=>{
						this.$Router.pushTab("/pages/index/index")
					})
				} else {
					console.log('验证失败');
				}
			});
		}
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	}
};
</script>

<style lang="scss" scoped>
.wrap {
	font-size: 28rpx;
	.content {
		width: 600rpx;
		margin: 80rpx auto 0;

		.title {
			text-align: left;
			font-size: 60rpx;
			font-weight: 500;
			margin-bottom: 100rpx;
		}
		input {
			text-align: left;
			margin-bottom: 10rpx;
			padding-bottom: 6rpx;
		}
		.tips {
			color: $u-type-info;
			margin-bottom: 60rpx;
			margin-top: 8rpx;
		}
		.getCaptcha {
			background-color: #2979ff;
			color: #fff;
			border: none;
			font-size: 30rpx;
			padding: 12rpx 0;
			letter-spacing: 14rpx;
			&::after {
				border: none;
			}
		}
		.alternative {
			color: $u-tips-color;
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
		}
	}
	.buttom {
		.loginType {
			display: flex;
			padding: 150rpx;
			justify-content: center;
			align-items: center;
			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				color: $u-content-color;
				font-size: 28rpx;
			}
		}

		.hint {
			padding: 20rpx 40rpx;
			font-size: 20rpx;
			color: $u-tips-color;
			position: fixed;
			bottom: 0;
			.link {
				color: $u-type-warning;
			}
		}
	}
}
</style>
